﻿@{
    ViewBag.Title = "小说搜索-2眼看书";
}

<div class="chapter">
    <div class="categoryMenu">
        <a href="@Url.Action("Category", "Book", new { typeid=1 })">玄幻魔法</a>
        <a href="@Url.Action("Category", "Book", new { typeid=2 })">武侠修真</a>
        <a href="@Url.Action("Category", "Book", new { typeid=3 })">都市言情</a>
        <a href="@Url.Action("Category", "Book", new { typeid=4 })">历史穿越</a>
        <a href="@Url.Action("Category", "Book", new { typeid=5 })">恐怖悬疑</a>
        <a href="@Url.Action("Category", "Book", new { typeid=6 })">游戏竞技</a>
        <a href="@Url.Action("Category", "Book", new { typeid=7 })">军事科幻</a>
        <a href="@Url.Action("Category", "Book", new { typeid=8 })">女生频道</a>
    </div>
</div>
<div class="chapter">
    <div class="search-form">
        <input class="search-input" type="search" id="keyword" name="keyword" value="@ViewBag.Searchword" placeholder="输入小说名或作者名" />
        <button onclick="searchBooks(this)" class="search-btn">搜索</button>
    </div>
</div>
<div class="chapter">
    <dl class="am-cf sorttitle">
        <dt>搜索结果</dt>
    </dl>
    <div class="bookBox">    
    </div>
</div>
@section Scripts{
    <script>
        var canLoad = true;
        var Idx = 0;
        $(function () {
            loadSearchBooks();
            $(window).scroll(function () {
                var scrollVal = $(window).scrollTop();
                var docHigh = $(document).height();
                var winHigh = $(window).height();
                //如果滚动条到底
                if (scrollVal == docHigh - winHigh && canLoad) {
                    loadSearchBooks();
                }
            })

        })
        function searchBooks(obj)
        {
            var keyword = $("#keyword").val().trim();
            if (!keyword)
            {
                alert("请输入小说名或作者！");
                return;
            }
            $(obj).prop("disabled", true);
            setTimeout(function () {
                $(obj).prop("disabled", false);
            }, 1000);
            canLoad = true;
            Idx = 0;
            $(".bookBox").html("");
            loadSearchBooks();

        }
        function loadSearchBooks() {
            var keyword = $("#keyword").val().trim();
            if (!keyword)
                return;
            canLoad = false;            
            $.ajax({
                type: "POST",
                url: '@Url.Action("SearchData", "Book")',
                dataType: "json",
                data: 'keyword=' + keyword + '&page=' + Idx,
                success: function (data) {
                    console.log(data);
                    var newBook = "";
                    if (data.length > 0)
                    {
                        data.forEach(function (item) {
                            newBook += "<a href=\"/book/ChapterList/"+item.id+"\" class=\"book\">";
                            newBook += "<div class=\"book-title\">";
                            newBook += "<h3>" + item.bookname + "</h3>";
                            newBook += "<p>" + item.author + "/" + item.typeName + "/"+item.isOver+"</p>";
                            newBook += "</div>";
                            newBook += "<div class=\"book-desc\">";
                            newBook += item.desc;
                            newBook += "</div>";
                            newBook += "<div class=\"book-update\">";
                            newBook += "更新："+item.updateDate;
                            newBook += "</div>";
                            newBook += "</a>";
                        })
                        canLoad = true;
                        Idx++;
                    }
                    else
                    {
                        newBook += "<a class=\"book\">";
                        newBook += "<div class=\"book-title\">";
                        newBook += "<h3>没有了！</h3>";
                        newBook += "</div>";
                        newBook += "</a>";
                    }
                    $(".bookBox").append(newBook);
                },
                beforeSend: function () {
                    $("#loading").show();
                },
                complete: function () {
                    $("#loading").hide();                    
                }
            });
        }
    </script>
}


